<template>
  <div class="class">
    <!-- 上半 -->
    <div class="select">
      <el-form
        style="margin-top: 10px"
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="班级" label-width="50px" prop="class">
              <el-input
                v-model="form.class"
                placeholder="请输入班级"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学段" prop="duan">
              <el-select v-model="form.duan" placeholder="请选择学段">
                <el-option label="小学" value="xiaoxue"></el-option>
                <el-option label="初中" value="zhongxue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="年级" prop="work">
              <el-select v-model="form.work" placeholder="请选择年级">
                <el-option label="一年级" value="one"></el-option>
                <el-option label="二年级" value="two"></el-option>
                <el-option label="三年级" value="three"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"> </el-col>
          <el-col :span="5"> </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <div class="btn">
        <el-button
          type="primary"
          @click="onSubmit"
          style="width: 80px; height: 35px; margin-right: 10px"
          >查询</el-button
        >
        <el-button style="width: 80px; height: 35px" @click="resetForm('form')"
          >重置</el-button
        >
      </div>
    </div>
    <!-- 下半 -->
    <div class="table">
      <div class="icon">
        <i class="el-icon-top" style="margin-right: 10px">批量升级</i>
        <i class="el-icon-s-tools" style="margin-right: 10px">升级设置</i>
        <i class="el-icon-bottom">导出班级</i>
        <i class="el-icon-circle-plus-outline" @click="add">添加班级</i>
      </div>
      <div class="tab">
        <el-table :data="tableData" border style="width: 100%;height: 100%;">
          <el-table-column prop="date" label="序号" width="80">
            <template #default="{ $index }">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <el-checkbox v-model="selectedRows[$index]"></el-checkbox>
                <span style="margin-left: 10px">{{ $index + 1 }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="class" label="班级" width="180">
          </el-table-column>
          <el-table-column prop="nianji" label="年级"> </el-table-column>
          <el-table-column prop="duan" label="学段"> </el-table-column>
          
          <el-table-column prop="teacher" label="班主任"> </el-table-column>
          <el-table-column prop="number" label="学生人数"> </el-table-column>
          <el-table-column prop="state" label="班级类型"> </el-table-column>
          <el-table-column prop="zuo" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small">编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                删除
              </el-button>
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >

              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >升级</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- //分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalItems"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const originalData = {
      date: "1",
      class: "一班",
      nianji: "一年级",
      duan: "小学",
      teacher: "王大发",
      number: "35",
      state: "重点班",
      zuo: "",
    };
    //创建40条数据（模拟400条分页）
    const duplicatedData = [];
    const totalItems =400;
    const pageSize = 10;
    for (let i = 0; i < 40; i++) {
      duplicatedData.push({
        ...originalData,
        class: `${i + 1}班`,
        id: i + 1,
        state: i < 3 ? "重点班" : i < 6 ? "实验班" : "普通班",
      });
    }
    return {
      form: {
        class: "",
        duan: "",
        work: "",
        teach: "",
      },

      tableData: duplicatedData.slice(0, pageSize),
pageSize,
currentPage: 1,
totalItems,
      //用于存储选中的状态数组
      selectedRows: [],
    };
  },

  mounted() {
    // 初始化选中状态数组
    this.selectedRows = new Array(this.tableData.length).fill(false);
  },

  watch: {
    // 当数据变化时更新选中状态数组
    tableData: {
      handler(newVal) {
        this.selectedRows = new Array(newVal.length).fill(false);
      },
      deep: true,
    },
  },
  methods: {
    add(){
      this.$router.push({name:"EditClass"})
    },
    handleSizeChange(val){
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    onSubmit() {
      console.log(this.form);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //编辑事件
    handleClick(row) {
      console.log(row);
    },
    // 获取所有选中的行
    getSelectedRows() {
      return this.tableData.filter((_, index) => this.selectedRows[index]);
    },

    // 操作按钮方法
    handleEdit(row) {
      console.log("编辑班级:", row);
    },

    handleDelete(row) {
      console.log("删除班级:", row);
    },

    handleUpgrade(row) {
      console.log("升级班级:", row);
    },
  },
};
</script>

<style scoped lang="scss">
.class {
  display: flex;
  flex-direction: column; /**垂直排列 */
  height: 100vh;
  .select {
    height: auto;
    background-color: #fafafa;
    border-radius: 10px;
    padding: 10px;
    .el-divider--horizontal {
      margin:10px 0;
    }
    .btn {
      margin-top: 20px;
      margin-left: 8px;
    }
  }
  .table {
    display: flex;
    flex-direction: column;
    flex: 1;

    background-color: #ffffff;
    margin-top: 20px;
    border-radius: 10px;
    padding: 20px;
    .icon {
      display: flex;
      justify-content: flex-end;
      cursor: pointer;
      color: blue;
      font-size: 15px;
      float: right;
      margin-bottom: 20px;
    }
    .tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 300px;
      .el-table{
        flex:1;
      }
    }
    .block {
      display: flex;
      justify-content: flex-end;
      margin-top: 24px;
  }
  }}
</style>
